<template>
	<view>
		<view class="left">
			<view
				class="titleBox"
				style="	height: 128rpx;
	display: flex;
	line-height: 128rpx;
	font-size: 24rpx;
	position: relative;
	.titleReturn{
		position: absolute;
		left: 18rpx;"
			>
				<view class="titleReturn">
					<uni-icons custom-prefix="iconfont" type="icon-xiangzuojiantou" style="font-size: 35rpx; margin-left: 10rpx" size="10"></uni-icons>
					返回
				</view>
				<view class="titleText" style="position: absolute; left: 50%; transform: translateX(-50%)">报修</view>
			</view>

			<view class="item" style="border-bottom: 0.1rpx solid #ececec">
				<view class="left">类型</view>
				<view class="right">请选择报修类型</view>
				<uni-icons type="right" style="font-size: 32rpx" size="15"></uni-icons>
			</view>

			<view class="item" style="border-bottom: 0.1rpx solid #ececec">
				<view class="left">报修地址</view>
				<view class="right">清水湾2号楼1单元2103</view>
				<uni-icons type="right" style="font-size: 32rpx" size="15"></uni-icons>
			</view>

			<view class="item">
				<view class="left">联系电话</view>
				<view class="right">13522568755</view>
				<uni-icons type="right" style="font-size: 32rpx" size="15"></uni-icons>
			</view>

			<textarea class="boder" cols="30" rows="10" placeholder="请输入报修问题，以便维修人员尽快为您解决"></textarea>

			<view class="picture">
				<view class="itemm">
					<uni-icons style="color: #898989; font-size: 42rpx" type="camera" size="35"></uni-icons>
				</view>
				<view class="itemm">
					<view class="chuo">
						<uni-icons style="color: #fff; font-size: 32rpx" type="closeempty" size="14"></uni-icons>
					</view>
				</view>
				<view class="itemm">
					<view class="chuo">
						<uni-icons style="color: #fff; font-size: 32rpx" type="closeempty" size="14"></uni-icons>
					</view>
				</view>
				<view class="itemm">
					<view class="chuo">
						<uni-icons style="color: #fff; font-size: 32rpx" type="closeempty" size="14"></uni-icons>
					</view>
				</view>
			</view>
			<view class="submit" @click="jup">提交</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		jup() {
			uni.navigateTo({
				url: '/pages/pagesbusiness/repairsrecord/repairsrecord'
			});
		}
	}
};
</script>

<style lang="less">
.left {
	width: 100%;
	height: 60rpx;
}

.item {
	width: 95%;
	height: 100rpx;
	line-height: 100rpx;
	display: flex;
	margin: 0 auto;
	justify-content: space-between;
	// background-color: #1f8fff;

	.left {
		height: 100%;
		text-indent: 15rpx;
	}

	.right {
		width: 100%;
		height: 100%;
		color: #898989;
		// background-color: #1f8fff;
		font-size: 30rpx;
		text-align: right;

		.uni-icons {
			color: #898989;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
	}
}

.boder {
	width: 90%;
	height: 200rpx;
	margin: 0 auto;
	border: 1rpx solid #b6b6b6;
	text-indent: 20rpx;
	line-height: 70rpx;
	color: #b6b6b6;
}

.picture {
	width: 90%;
	height: 100rpx;
	margin: 0 auto;
	// border: 1rpx solid #b6b6b6;
	display: flex;

	.itemm {
		width: 80rpx;
		height: 80rpx;
		border: 1rpx solid #b6b6b6;
		margin-top: 20rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		.chuo {
			width: 30rpx;
			height: 30rpx;
			background-color: #898989;
			border-radius: 15rpx;
			position: absolute;
			top: -10rpx;
			text-align: center;
			right: -10rpx;
			color: #fff;
			line-height: 30rpx;
		}
	}
}

.submit {
	width: 450rpx;
	height: 70rpx;
	margin: 0 auto;
	border-radius: 30rpx;
	margin-top: 100rpx;
	background-color: #1f8fff;
	color: #fff;
	text-align: center;
	line-height: 70rpx;
}
</style>
